import FontAwesome from "@expo/vector-icons/FontAwesome";
import { Ionicons, AntDesign, FontAwesome5 } from "@expo/vector-icons";
import { Link, Tabs } from "expo-router";
import { Pressable, useColorScheme } from "react-native";
import { Text } from "react-native";

import Colors from "../../constants/Colors";
import { View } from "@components/Themed";

/**
 * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
 */
function TabBarIcon(props: { name: React.ComponentProps<typeof FontAwesome>["name"]; color: string }) {
    return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />;
}

export default function TabLayout() {
    const colorScheme = useColorScheme();
    return (
        <Tabs
            initialRouteName="home"
            screenOptions={
                {
                    // tabBarAllowFontScaling:true,
                    // tabBarActiveBackgroundColor:'transparent',
                    // // tabBarInactiveBackgroundColor:'#ccc'
                    // // tabBarButton:()=>{
                    // //     return <View>
                    // //         <Text>213</Text>
                    // //     </View>
                    // // }
                    // tabBarStyle:{
                    //     backgroundColor:'transparent',
                    // },
                    // tabBarItemStyle:{
                    //     backgroundColor:'transparent',
                    //     borderBlockColor:'transparent'
                    // },
                }
            }
        >
            <Tabs.Screen
                name="home"
                options={{
                    title: "home",
                    tabBarItemStyle: {
                        backgroundColor: "transparent",
                        backfaceVisibility: "hidden",
                        borderBlockColor: "transparent",
                    },
                    // tabBarBadge:2,
                    tabBarIcon: ({ size, color }) => <AntDesign name="home" size={size} color={color} />,
                }}
            />
            <Tabs.Screen
                name="multipleSign"
                options={{
                    title: "multipleSign",
                    tabBarIcon: ({ size, color }) => <AntDesign name="antdesign" size={size} color={color} />,
                }}
            />
            <Tabs.Screen
                name="index"
                options={{
                    title: "user",
                    tabBarIcon: ({ size, color }) => {
                        return <AntDesign name="user" size={24} color={color} />;
                    },
                    headerRight: () => (
                        <Link href="/modal" asChild>
                            <Pressable>
                                {({ pressed }) => <FontAwesome name="info-circle" size={25} color={Colors[colorScheme ?? "light"].text} style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }} />}
                            </Pressable>
                        </Link>
                    ),
                }}
            />
        </Tabs>
    );
}
